<template>
  <div>
    <a-modal
      centered
      :title="title"
      :width="1000"
      :visible="visible"
      @ok="handleOk"
      @cancel="handleCancel"
      cancelText="关闭">


      <div>
        <a-table
          size="small"
          bordered
          rowKey="id"
          :columns="columns"
          :dataSource="dataSource"
          :pagination="ipagination"
          :loading="loading"
          :rowSelection="{selectedRowKeys: selectedRowKeys,onSelectAll:onSelectAll,onSelect:onSelect,onChange: onSelectChange}"
          @change="handleTableChange">

        </a-table>
      </div>
      <!-- table区域-end -->
    </a-modal>
  </div>
</template>
<script>
  import {saveListRelationship} from '@/api/api'
  import {JeecgListMixin} from '@/mixins/JeecgListMixin'
  export default {
    name: "RelationshipModel",
    mixins: [JeecgListMixin],
    data() {
        return {
            visible:false,
            title:"",
            selectedRowKeys: [],
            selectionRows:[],
            dataSource2:[],
            typeId:"",
            columns: [
            {
                title: '#',
                dataIndex: '',
                key:'rowIndex',
                width:60,
                align:"center",
                customRender:function (t,r,index) {
                return parseInt(index)+1;
                }
            },{
                title: '使用滤芯',
                align: "center",
                dataIndex: 'filterelementName',
            },
            {
                title: '滤芯可用天数',
                align: "center",
                dataIndex: 'validity',
            },
            {
                title: '滤芯最低更换天数',
                align: "center",
                dataIndex: 'replacementDays',
            },
            ],
            url:{
                list:"/equipment/filterelement/list",
            }
        }
    },
    methods: {
        edit(typeId){
            this.typeId=typeId;
            this.visible=true;
        },
        //点击确定按钮时调用
        handleOk(){
            var that=this;
            console.log("data:" + this.dataSource2);
            let params ={};
            params.typeId=this.typeId;
            params.filterelementIds="";
            for(var i=0;i<this.dataSource2.length;i++){
               params.filterelementIds+=this.dataSource2[i].filterelementId+",";
            }
            saveListRelationship(params).then((res) => {
              if (res.success) {
                that.$message.success(res.message)
                that.$emit('ok')
              } else {
                that.$message.warning(res.message)
              }
            }).finally(() => {
                 that.handleCancel();
            })

        },
        handleTableChange(pagination, filters, sorter){
            //分页、排序、筛选变化时触发
            console.log(sorter);
            //TODO 筛选
            if (Object.keys(sorter).length > 0) {
                this.isorter.column = sorter.field;
                this.isorter.order = "ascend" == sorter.order ? "asc" : "desc"
            }
            this.ipagination = pagination;
            this.loadData();

        },
        onSelectChange(selectedRowKeys, selectedRows) {
            this.selectedRowKeys = selectedRowKeys;
            this.selectionRows = selectedRows;
        },
        //多选框选中单行数据调用的方法
        onSelect(record, selected) {
            //判断点击事件发生后是否被选中
            if (selected === true) {
                this.dataSource2.push(record);
                console.log(this.dataSource2)//如果当前行被选中则加入到集合中
            } else {
                //得到该行在数据源中的索引
                var index = this.dataSource2.indexOf(record);
                console.log(index);
                console.log(this.dataSource2)
                //判断下标是否大于0
                if (index >= 0) {
                    //如果当前行被取消选中，则在集合中剪切掉该行
                    this.dataSource2.splice(this.dataSource2.indexOf(record), 1);
                    console.log(this.dataSource2)
                }
            }
        },
        //多选框全选和全部取消选中出发的时间
        onSelectAll(selected, selectedRows, changeRows) {
            //判断点击全选事件发生后是否被选中
            if (selected === true) {
                //如果选中把所有行的数据保存到当前页面的变量中
                for (var a = 0; a < changeRows.length; a++) {
                    this.dataSource2.push(changeRows[a]);
                    console.log(this.dataSource2)
                }
            } else {
                //把所有数据从变量中清除
                for (var b = 0; b < changeRows.length; b++) {
                    this.dataSource2.splice(this.dataSource2.indexOf(changeRows[b]), 1);
                    console.log(this.dataSource2)
                }
            }
            // console.log(selected, selectedRows, changeRows);
        },
        //隐藏当前的弹窗页面
        handleCancel(){
            this.visible=false;
            this.onClearSelected();
        },
        onClearSelected() {
            //清空存放选中数据的数组
            this.selectedRowKeys = [];
            this.selectionRows = [];
            this.dataSource2=[];
        },
    }
  }

</script>